<template>
  <!-- eslint-disable vue/html-indent -->
  <!-- eslint-disable vue/html-self-closing -->
  <!-- eslint-disable vue/html-closing-bracket-newline -->
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" count="￥ 126560">
            <template slot="charts">
              <div
                style="
                  display: flex;
                  justify-content: space-around;
                  line-height: 25px;
                "
              >
                <span>周同比 56.67% </span>
                <span
                  ><svg
                    t="1643101144183"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3114"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M936.170667 669.952L534.613333 268.394667a32 32 0 0 0-42.986666-2.069334l-2.282667 2.069334L87.829333 669.952a8.533333 8.533333 0 0 0-2.496 6.037333v66.346667a8.533333 8.533333 0 0 0 14.570667 6.058667l412.074667-412.096 412.117333 412.096a8.533333 8.533333 0 0 0 14.570667-6.037334v-66.346666a8.533333 8.533333 0 0 0-2.496-6.058667z"
                      fill="#d81e06"
                      p-id="3115"
                    ></path></svg
                ></span>
                <span>日同比 19.96% </span>
                <span
                  ><svg
                    t="1643101249242"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4143"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M512 714.666667c-8.533333 0-17.066667-2.133333-23.466667-8.533334l-341.333333-341.333333c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l320 317.866667 317.866667-320c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L533.333333 704c-4.266667 8.533333-12.8 10.666667-21.333333 10.666667z"
                      p-id="4144"
                      fill="#1afa29"
                    ></path></svg
                ></span>
              </div>
            </template>
            <template slot="footer">
              <span>日销售额 $ 12423</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" count="88460">
            <template slot="charts">
              <LineChart></LineChart>
            </template>
            <template slot="footer">
              <span>日访问量 1234</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" count="88460">
            <template slot="charts">
              <BarCharts></BarCharts>
            </template>
            <template slot="footer">
              <span>转化率 65%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="78%">
            <template slot="charts">
              <ProgressCharts></ProgressCharts>
            </template>
            <template slot="footer">
              <div style="display: flex; justify-content: space-around">
                <span>周同比 56.67% </span>
                <span
                  ><svg
                    t="1643101144183"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3114"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M936.170667 669.952L534.613333 268.394667a32 32 0 0 0-42.986666-2.069334l-2.282667 2.069334L87.829333 669.952a8.533333 8.533333 0 0 0-2.496 6.037333v66.346667a8.533333 8.533333 0 0 0 14.570667 6.058667l412.074667-412.096 412.117333 412.096a8.533333 8.533333 0 0 0 14.570667-6.037334v-66.346666a8.533333 8.533333 0 0 0-2.496-6.058667z"
                      fill="#d81e06"
                      p-id="3115"
                    ></path></svg
                ></span>
                <span>日同比 19.96% </span>
                <span
                  ><svg
                    t="1643101249242"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4143"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M512 714.666667c-8.533333 0-17.066667-2.133333-23.466667-8.533334l-341.333333-341.333333c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l320 317.866667 317.866667-320c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L533.333333 704c-4.266667 8.533333-12.8 10.666667-21.333333 10.666667z"
                      p-id="4144"
                      fill="#1afa29"
                    ></path></svg
                ></span>
              </div>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
/* eslint-disable spaced-comment */
/* eslint-disable eqeqeq */
/* eslint-disable comma-dangle */
/* eslint-disable quotes */
/* eslint-disable semi */
import Detail from "./Detail";
import LineChart from "./LineChart";
import BarCharts from "./BarCharts";
import ProgressCharts from "./ProgressChart";
export default {
  name: "Card",
  components: {
    Detail,
    LineChart,
    BarCharts,
    ProgressCharts,
  },
};
</script>

<style>
</style>
